<template>
  <view class="tab_bar">
    <view class="tabbarBox">
      <template v-for="(item, index) in tabBarList" :key="index">
        <view
          class="handleBox"
          v-if="item.isShow"
          @click="goPages(item.pagePath, item.pageIndex)"
        >
          <view class="menuBox">
            <view class="menuIcon">
              <image
                v-if="item.pageIndex != useHomeStore.selectIndex"
                class="img"
                :src="item.iconPath"
              ></image>
              <image v-else class="img" :src="item.selectIconPath"></image>
            </view>
            <view class="menuName">
              <text
                :class="
                  item.pageIndex == useHomeStore.selectIndex
                    ? 'TextColor'
                    : 'Text'
                "
                >{{ item.tabbarName }}</text
              >
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import homeStore from "@/store/modules/home";
import { getItem } from "../../utils/localStorage";
import { Alert, unAlert } from "../../utils/tool";

const useHomeStore = homeStore();

// const tabBarList = ref([
//   {
//     tabbarName: "首页",
//     pagePath: "/pages/index/index",
//     iconPath: "./../../static/image/homefill.png",
//     selectIconPath: "./../../static/image/homefill-copy.png",
//     pageIndex: 0,
//     isShow: 1,
//   },
//   {
//     tabbarName: "发布",
//     pagePath: "/pages/issue/index",
//     iconPath: "./../../static/image/sd_.png",
//     selectIconPath: "./../../static/image/sd.png",
//     pageIndex: 1,
//     // 如果未登录则显示，如果登录了并且为发布了自己简历(待审核)，则隐藏，反之。
//     isShow:
//       getItem("userInfo").isFormal != null
//         ? getItem("userInfo").isFormal == 0
//           ? 1
//           : 0
//         : 1,
//   },
//   {
//     tabbarName: "我的",
//     pagePath: "/pages/user/index",
//     iconPath: "./../../static/image/myfill.png",
//     selectIconPath: "./../../static/image/myfill-copy.png",
//     pageIndex: 2,
//     isShow: 1,
//   },
// ]);

//进入tabble页

const tabBarList = ref([
  {
    tabbarName: "首页",
    pagePath: "/pages/index/index",
    iconPath: "./../../static/image/homefill.png",
    selectIconPath: "./../../static/image/homefill-copy.png",
    pageIndex: 0,
    isShow: 1,
  },
  {
    tabbarName: "发布",
    pagePath: "/pages/issue/index",
    iconPath: "./../../static/image/sd_.png",
    selectIconPath: "./../../static/image/sd.png",
    pageIndex: 1,
    // 如果未登录则显示，如果登录了并且为发布了自己简历(待审核)，则隐藏，反之。
    // isShow: getItem("issueStatus") == 0 ? 1 : getItem("issueStatus") == -1 ? 1 : 0,
    isShow: 1,
  },
  {
    tabbarName: "我的",
    pagePath: "/pages/user/index",
    iconPath: "./../../static/image/myfill.png",
    selectIconPath: "./../../static/image/myfill-copy.png",
    pageIndex: 2,
    isShow: 1,
  },
]);

const goPages = (pagePath, pageIndex) => {
  console.log("测试：", pageIndex);
  useHomeStore.updateTabbarIndex(pageIndex);
  uni.switchTab({
    url: pagePath,
  });
};

//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
onShow(() => {
  useHomeStore.updateMenuInfo();

  console.log(getItem("toRouter"));

  if (getItem("toRouter") == "/pages/index/index") {
    useHomeStore.updateTabbarIndex(0);
  } else if (getItem("toRouter") == "/pages/issue/index") {
    useHomeStore.updateTabbarIndex(1);
  } else if (getItem("toRouter") == "/pages/user/index") {
    useHomeStore.updateTabbarIndex(2);
  }
});
onHide(() => {
  // console.log('App Hide')
});
</script>
<style lang="scss">
.tab_bar {
  width: 90vw;
  // height: 100rpx;
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  /* 模糊大小就是靠的blur这个函数中的数值大小 */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 40rpx;
  /* background-color: red; */
  // background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);

  .tabbarBox {
    display: flex;
    // margin-top: 10rpx;
    justify-content: space-around;

    .handleBox {
      // width: 20vw;
      // height: 110rpx;
      // height: 110rpx;
      padding: 10rpx 0;
      width: 33%;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;

      .menuBox {
        padding: 0rpx 20rpx;
        width: 120rpx;
        height: 98%;
        text-align: center;

        .img {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}

.Text {
  font-size: 24rpx;
  font-family: Cochin, serif;
  font-weight: 900;
}

.TextColor {
  @extend .Text;
  color: #409eff;
}
</style>
